<template>
    <el-main>
        <div class="t4_banner">
            <div class="t4_w">
                <div class="t4_bannerBOX">
                    <el-input v-model="searchInfo" type="text" name="keywords" id="keywords" placeholder="请输入资源名称"
                        @keyup.enter.native="searchHandle" clearable>
                        <el-button @click="getListData" slot="append" icon="el-icon-search">搜索</el-button>
                    </el-input>
                    <ul class="list_Ul">
                        <li v-for="(item, index) in hotWordList" :key="index">
                            <a @click="hotClick(item)">{{ item }}</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="t4_content">
            <div class="t4_contents_top">
                <div class="t4_w" style="position: relative">
                    <div class="t4_local">
                        <span class="local-tag"><img src="@/assets/images/sub_ts.png" alt="" /></span>
                        <a href="/">首页</a> &gt; 资源数据 &gt; 服务目录
                    </div>
                    <div class="t4_API_cons">
                        <div class="t4_l t4_l_nav">
                            <!-- div1 -->
                            <div class="t4_l_cons t4_nav_cons_t">
                                <ul class="t4_ulsb" style="padding: 0">
                                    <li style="width: 100%; cursor: default">服务目录</li>
                                </ul>
                                <el-input style="margin: 8px 0 8px" placeholder="输入关键字进行过滤" size="medium" clearable
                                    v-model="filterText">
                                    <el-button slot="append" icon="el-icon-search"></el-button>
                                </el-input>

                                <div class="t4_sub_cons">
                                    <el-tree style="background: none" @node-click="chooseDeptList"
                                        :expand-on-click-node="false" class="filter-tree" :data="deptArr"
                                        :props="defaultProps" :filter-node-method="filterNode" default-expand-all
                                        highlight-current node-key="id" ref="tree">
                                        <span class="custom-tree-node" slot-scope="{ node, data }">
                                            <span>{{ node.label }}&nbsp;({{ data.dataCount }})</span>
                                        </span>
                                    </el-tree>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div v-show="!infoFlag" class="t4_r t4_r_sj phone_css" style="height: auto; min-height: 560px">
                        <div class="lTop-box">
                            <div class="proList">
                                <div class="filter-container" style="width: 100%;">领域筛选：
                                    <ul class="clearfix transUl" :style="{height:maxHeight}">
                                        <li style="margin-top: 10px;" v-for="(item, index) in items" :key="index"
                                            :class="{ 'highlighted': selectedItem === item }" @click="selectItem(item)"
                                            :title="item.name">
                                            {{ item.name }}
                                        </li>
                                    </ul>
                                  <div class="toggleBtn" v-if="items.length > 5" @click="toggleMore">
                                    <span v-show="!isOpen">展&nbsp;开</span>
                                    <span v-show="isOpen">收&nbsp;起</span>
                                  </div>
                                </div>
                            </div>
                            <div class="proList">
                                <div class="filter-container" style="width: 100%;">标签筛选：
                                    <ul class="clearfix transUl" :style="{height:maxHeight}">
                                        <li style="margin-top: 10px;" v-for="(items, index) in itemss" :key="index"
                                            :class="{ 'highlighted': selectedItems == items }"
                                            @click="selectItems(items)"
                                            :title="items.name">
                                            {{ items.name }}
                                        </li>
                                    </ul>
                                  <div class="toggleBtn" v-if="itemss.length > 5" @click="toggleMore">
                                    <span v-show="!isOpen">展&nbsp;开</span>
                                    <span v-show="isOpen">收&nbsp;起</span>
                                  </div>
                                </div>
                            </div>
                            <div class="proList">
                                <div class="filter-container" style="width: 100%;">场景筛选：
                                    <ul class="clearfix transUl" :style="{height:maxHeight}">
                                        <li style="margin-top: 10px;" v-for="(itemss, index) in itemsss" :key="index"
                                            :class="{ 'highlighted': selectedItemss == itemss }"
                                            @click="selectItemss(itemss)"
                                            :title="itemss.name">
                                            {{ itemss.name }}
                                        </li>
                                    </ul>
                                  <div class="toggleBtn" v-if="itemsss.length > 5" @click="toggleMore">
                                    <span v-show="!isOpen">展&nbsp;开</span>
                                    <span v-show="isOpen">收&nbsp;起</span>
                                  </div>
                                </div>
                            </div>
                        </div>
                        <div class="listToggle">
                            <span @click="toggleList('info')"><img style="width: 18px" :src="infoImg" alt="" /></span>
                            <span @click="toggleList('list')"><img style="width: 20px" :src="listImg" alt="" /></span>
                            <!-- <el-button size="small" @click="chooseAll" v-if="listFlag === 'info'">全选</el-button>
              <el-button size="small" @click="approvalBtnClick" :disabled="isButtonDisabled"
                v-if="listFlag === 'info'">申请</el-button> -->
                        </div>
                        <div class="t4_r_top t4_border" style="height: auto">
                            <div class="t4_r_sjCons">
                                <!-- 目录列表 -->
                                <div class="t4_sjCons" style="display: block">
                                    <div v-if="listFlag === 'info'" v-for="(item, index) in infoList" :key="index"
                                        class="t2_sjCons_list t2_result_list_r2">
                                        <h2 class="titBox">
                                            <a @click="infoHandle(item)"><img src="@/assets/images/share.png"
                                                    style="padding: 0 8px; height: 24px" />{{ item.name }}</a>
                                            <div class="sqBtn">
                                                <el-button type="text" v-if="item.isApp == 0">待审核</el-button>
                                                <el-button type="text" v-if="item.isApp == 1">审核通过</el-button>
                                                <el-button type="text" v-if="item.isApp == 2">无条件共享</el-button>
                                                <el-button plain size="small" v-if="item.isApp == 3"
                                                    @click="approvalBtn(item)">申&nbsp;请</el-button>
                                            </div>
                                        </h2>
                                        <div class="zyInfoBox">
                                            <div></div>
                                            <div class="zyInfo">
                                                <div>资源分类：{{ item.meunName }}</div>
                                                <div class="infoItem_box">
                                                    <div class="infoItem">
                                                        <div>资源提供方：{{ item.xxzytgf }}</div>
                                                        <div>共享类型：{{ item.gxtype }}</div>
                                                    </div>
                                                    <div class="infoItem">
                                                        <div>创建时间：{{ item.createTime }}</div>
                                                        <div>更新周期：{{ item.frequency }}</div>
                                                    </div>
                                                    <div class="infoItem">
                                                        <div>更新日期：{{ item.createTime }}</div>
                                                        <div>
                                                            共享方式：
                                                            {{ item.gxfs }}
                                                        </div>
                                                    </div>
                                                    <div class="infoItem">
                                                        <div>
                                                            资源类型：{{
                                                                item.deptType == 0 ? "数据资源" : "服务资源"
                                                            }}
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div v-if="listFlag === 'list'">
                                        <el-table :data="infoList" border style="width: 100%; margin-top: 25px"
                                            @selection-change="handleSelectionChange">
                                            <el-table-column prop="name" show-overflow-tooltip label="信息资源名称">
                                                <template slot-scope="scope">
                                                    <div :style="{
                                                        display: 'flex',
                                                        justifyContent: 'space-around',
                                                    }">
                                                        <a @click="infoHandle(scope.row)" style="
                                cursor: pointer;
                                width: calc(100% - 22px);
                                overflow: hidden;
                                text-overflow: ellipsis;
                              ">{{ scope.row.name }}</a>
                                                    </div>
                                                </template>
                                            </el-table-column>
                                            <el-table-column prop="xxzytgf" label="资源提供方" show-overflow-tooltip
                                                width="110">
                                            </el-table-column>
                                            <el-table-column prop="meunName" label="资源分类" width="100">
                                            </el-table-column>
                                            <el-table-column prop="gxfs" label="共享方式" width="100">
                                            </el-table-column>
                                            <el-table-column prop="gxtype" label="共享类型" width="100">
                                            </el-table-column>
                                            <el-table-column prop="createTime" label="更新时间" width="180">
                                            </el-table-column>
                                        </el-table>
                                    </div>
                                    <div class="" id="pageDiv">
                                        <el-pagination background @size-change="handleSizeChange"
                                            @current-change="handleCurrentChange" :current-page="pageNo"
                                            :page-size="pageSize" :page-sizes="[10, 20, 50, 100]"
                                            layout="prev, pager, next, sizes, jumper" :total="totalNum">
                                        </el-pagination>
                                    </div>
                                </div>
                                <!-- 目录列表 end -->
                            </div>
                        </div>
                    </div>
                    <div v-show="infoFlag" class="t4_r t4_r_sj phone_css" style="height: auto; min-height: 560px">
                        <div class="listToggle backBtn">
                            <el-button size="small" type="primary" @click="goindex">返回列表</el-button>
                        </div>
                        <dataInfo :updateCycleList="updateCycleList" :shareTypeList="shareTypeList"
                            :ShareModeList="ShareModeList" :resTpye="resTpye"></dataInfo>
                    </div>
                </div>
            </div>
        </div>
        <!-- 申请弹窗 -->
        <el-dialog title="资源申请" :visible.sync="approvalDialog.show" top="40px" width="800px" append-to-body>
            <!-- infoList -->
            <approval v-if="approvalDialog.show"  ref="initxxx" @refresh="refresh" :bmId="bmId" @closeDialog="handleCloseDialog"
                :approvalDialog="approvalDialog">
            </approval>
        </el-dialog>
        <!--        <el-dialog title="资源申请" :visible.sync="approvalDialog.show" width="1100px" append-to-body>-->
        <!--            <el-form :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" :model="ruleForm">-->
        <!--                <el-form-item label="资源清单：">-->
        <!--                    <el-table :data="ItemProps" border style="width: 100%">-->
        <!--                        <el-table-column label="序号" width="180">-->
        <!--                            <template slot-scope="scope">-->
        <!--                                {{ scope.$index + 1 }}-->
        <!--                            </template>-->
        <!--                        </el-table-column>-->
        <!--                        <el-table-column prop="name" label="资源名称" width="180">-->
        <!--                        </el-table-column>-->
        <!--                        <el-table-column prop="catalogName" label="所属分类">-->
        <!--                        </el-table-column>-->
        <!--                        <el-table-column prop="institutionName" label="资源提供方">-->
        <!--                        </el-table-column>-->
        <!--                        <el-table-column prop="createTime" label="创建时间">-->
        <!--                        </el-table-column>-->
        <!--                    </el-table>-->
        <!--                </el-form-item>-->

        <!--                <el-form-item label="申请描述:" prop="textarea">-->
        <!--                    <el-input type="textarea" :rows="7" placeholder="请输入内容" v-model="ruleForm.textarea"-->
        <!--                        style="width: 100%">-->
        <!--                    </el-input>-->
        <!--                </el-form-item>-->

        <!--                <el-form-item label="文件上传:" prop="fileName">-->
        <!--                    <div style="display: flex; justify-content: space-between">-->
        <!--                        <el-upload :before-upload="beforeUpload" action="#" ref="upload" :file-list="fileList"-->
        <!--                            :auto-upload="false" multiple :limit="1" :on-exceed="handleExceed"-->
        <!--                            :on-change="handleFileChange">-->
        <!--                            <el-button slot="trigger" size="small" type="primary">选择文件</el-button>-->
        <!--                        </el-upload>-->
        <!--                        <el-button slot="tip" size="small" type="text" @click="downloadTemplateBtn">下载模板</el-button>-->
        <!--                    </div>-->
        <!--                </el-form-item>-->
        <!--            </el-form>-->
        <!--            <span slot="footer" class="dialog-bottom">-->
        <!--                <el-button type="primary" @click="submitBtn('ruleForm')">确认申请</el-button>-->
        <!--                <el-button @click="approvalDialog.show = false">取消</el-button>-->
        <!--            </span>-->
        <!--        </el-dialog>-->
    </el-main>
</template>

<script>
import { addr } from "../../assets/js/public.js";
import Cookies from "js-cookie";
import dataInfo from "./dataInfo";
import {
    topFive,
    getServerData,
    getServerResList,
    getProviderList,
    getUpdateCycle,
    getServeSeek,
    getCheckFile,
    getApplys,
    getSjmlTree,
    getSjmlTreeList,
    getbmlist
} from "../../utils/httpUtils";
import listImg from "@/assets/images/list.png";
import listImgAct from "@/assets/images/list-act.png";
import infoImg from "@/assets/images/infoList.png";
import infoImgAct from "@/assets/images/infoList-act.png";
import sqlImg from "@/assets/images/sql.png";
import apiImg from "@/assets/images/APIserve.png";
import fileImg from "@/assets/images/file.png";
import approval from "../dataDirectory/approval.vue";

export default {
    name: "index",
    components: {
        approval,
        dataInfo,
    },
    data() {
        return {
          maxHeight: '45px',
          isOpen: false,
            jcid: null,
            bqid: null,
            cjid: null,
            selectedItem: '全部',
            selectedItems: '全部',
            selectedItemss: '全部',
            tokens: JSON.parse(Cookies.get("token")),
            lydata: [],
            lydatas: [],
            lydatass: [],
            items: [],
            itemss: [],
            itemsss: [],
            selectedItem: '全部',
            eventDisabled: false,
            ruleForm: {
                textarea: "",
            },
            rules: {
                textarea: [
                    { required: true, message: "请输入申请描述", trigger: "blur" },
                ],
            },

            fileList: [],
            tokens: JSON.parse(Cookies.get("token")),
            resTpye: "",
            infoFlag: false,
            checkAllFlag: false,
            listFlag: "info",
            checkList: [],
            filterText: "",
            defaultProps: {
                children: "cMeunDepts",
                label: "name",
            },
            // 热门关键词
            hotWordList: [],
            // 搜索内容
            searchInfo: "",
            deptArr: [],
            deptAct: "",
            infoList: [],
            listImg: listImg,
            infoImg: infoImgAct,
            multipleSelection: [],
            currentPage: 1,
            pageSize: 10,
            totalNum: 0,
            pageNo: 1,
            code: "",
            name: "",
            institutionCodes: "",
            providerList: [],
            updateCycleList: [],
            shareTypeList: [],
            ShareModeList: [],
            resTypeList: [
                {
                    code: 0,
                    name: "数据资源",
                },
                {
                    code: 1,
                    name: "服务资源",
                },
            ],
            approvalDialog: {
                show: false,
            },
            ItemProps: [],
            codeString: "",
        };
    },
    mounted() {

        if (this.$route.query.classification) {
            this.getbmiddata(this.$route.query.classification);
        }
        this.init();
        if (this.$route.query.searchVal) {
            this.searchInfo = this.$route.query.searchVal;
            this.searchHandle();
        }
        this.getsonlist()

    },
    created() {
        if (this.$route.query.catalogData) {
            this.$nextTick(() => {
                this.infoHandle(this.$route.query.catalogData);
            });
        }
    },
    watch: {
        filterText(val) {
            this.$refs.tree.filter(val);
        },
    },
    computed: {
        isButtonDisabled() {
            return this.infoList.every((item) => !item.isAct);
        },
        checkboxDisabled() {
            return (item) => {
                if (item.apply === 0 && item.auth === 0) {
                    return false;
                } else if (item.apply === 1 && item.auth === 0) {
                    return true;
                } else if (item.apply === 1 && item.auth === 1) {
                    return true;
                }
            };
        },

    },
    methods: {
      toggleMore() {
        this.isOpen = !this.isOpen
        if(this.isOpen) {
          this.maxHeight = 'max-content'
        }else {
          this.maxHeight = '45px'
        }
      },
        refresh() {
            this.getListData()
        },
        goindex() {
            this.infoFlag = false;
            // this.infoList.forEach((item) => {
            //     item.isAct = false;
            // });
            this.$bus.$emit("initxxx", "");
        },
        handleCloseDialog() {
            // 处理 closeDialog 事件
            this.approvalDialog.show = false;
        },
        selectItem(item) {
            console.log(item, "选中的item")
            this.selectedItem = item;
            this.jcid = item.id
            this.getListData()
        },
        selectItems(item) {
            console.log(item, "选中的item")
            this.selectedItems = item;
            this.bqid = item.id
            this.getListData()
        },
        selectItemss(item) {
            console.log(item, "选中的item")
            this.selectedItemss = item;
            this.cjid = item.id
            this.getListData()
        },
        getsonlist() {
            this.$axios({
                url: xhDomain + `/api/meunDept/sonList?type=2`,
                method: 'get',
                headers: {
                    'Content-Type': 'application/json',
                    "Authorization": this.tokens
                },
                // data: params
            }).then((res) => {
                console.log(res, "sonlist");
                // 清空 this.items 数组
                this.items = [];

                // 首先向 this.items 添加一个特殊的对象
                this.items.push({
                    name: "全部",
                    id: ""
                });

                // 然后
                this.lydata = res.data
                this.lydata.forEach((item) => {
                    this.items.push({
                        name: item.name,
                        id: item.id
                    });
                })
                // 默认选中 "全部" 这一项
                this.selectedItem = this.items[0];
            })

            this.$axios({
                url: xhDomain + `/api/meunDept/sonList?type=3`,
                method: 'get',
                headers: {
                    'Content-Type': 'application/json',
                    "Authorization": this.tokens
                },
                // data: params
            }).then((res) => {
                console.log(res, "sonlist");
                // 清空 this.items 数组
                this.itemss = [];

                // 首先向 this.items 添加一个特殊的对象
                this.itemss.push({
                    name: "全部",
                    id: ""
                });

                // 然后
                this.lydatas = res.data
                this.lydatas.forEach((item) => {
                    this.itemss.push({
                        name: item.name,
                        id: item.id
                    });
                })
                // 默认选中 "全部" 这一项
                this.selectedItems = this.itemss[0];
                console.log(this.selectedItems, "选中的item");

            })
            this.$axios({
                url: xhDomain + `/api/meunDept/sonList?type=4`,
                method: 'get',
                headers: {
                    'Content-Type': 'application/json',
                    "Authorization": this.tokens
                },
                // data: params
            }).then((res) => {
                console.log(res, "sonlist");
                // 清空 this.items 数组
                this.itemsss = [];

                // 首先向 this.items 添加一个特殊的对象
                this.itemsss.push({
                    name: "全部",
                    id: ""
                });

                // 然后
                this.lydatass = res.data
                this.lydatass.forEach((item) => {
                    this.itemsss.push({
                        name: item.name,
                        id: item.id
                    });
                })
                // 默认选中 "全部" 这一项
                this.selectedItemss = this.itemsss[0];
                console.log(this.selectedItemss, "选中的item");
            })
        },
        // 获取部门数据
        getbmiddata(item) {
            let param = {
                id: item.id,
                pageNo: 1,
                size: 10,
                deptType: 1
            }
            getbmlist(param).then((res) => {
                console.log(res, "ress");
                this.infoList = res.content
            })
        },
        handleFileChange(file, fileList) {
            this.fileList = [];
            // 进行文件大小校验
            const isLt500K = file.size / 1024 < 500;
            if (!isLt500K) {
                this.$message.error("上传文件大小不能超过500KB！");
                return;
            }
            this.fileList = [file]; // 这里只添加当前选择的文件
        },
        beforeUpload(file) {
            const isLt500K = file.size / 1024 < 500;
            if (!isLt500K) {
                this.$message.error("上传文件大小不能超过500KB！");
                return false; // 返回 false 以阻止文件上传到服务器
            }
            return true; // 返回 true 以允许文件上传到服务器
        },
        handleExceed(files, fileList) {
            this.$message.warning(`当前限制选择${files.length}个文件`);
        },

        init() {
            this.getHotWord();
            this.getData();
            this.getProvider();
            this.getTypeList();
            this.getListData()
        },
        getTypeList() {
            //获取更新频率字段
            getUpdateCycle("updateCycle").then((res) => {
                if (res) {
                    this.updateCycleList = res.data;
                }
            });
            // 获取共享类型字段
            getUpdateCycle("shareType").then((res) => {
                if (res) {
                    this.shareTypeList = res.data;
                }
            });
            // 获取共享方式字段
            getUpdateCycle("ShareMode").then((res) => {
                if (res) {
                    this.ShareModeList = res.data;
                }
            });
        },
        // 获取数据
        getData() {
            let param = {
                type: 1,
            };
            getSjmlTree(param).then((res) => {
                console.log(res, "资源目录123");
                this.deptArr = [res];
            });

            // if (res && res.tree) {
            //   let arr = [];
            //   arr.push(res.tree);
            //   this.deptArr = arr;
            //   this.$nextTick(() => {
            //     this.$refs.tree.setCurrentKey(this.deptArr[0].id);
            //   });
            // }
            // if (res && res.pageInfo) {
            //   res.pageInfo.totalList.forEach((item) => {
            //     item.isAct = false;
            //   });
            //   this.infoList = res.pageInfo.totalList;
            //   console.log(this.infoList, "this.infoList");
            //   this.currentPage = res.pageInfo.currentPage;
            //   this.pageSize = res.pageInfo.pageSize;
            //   this.totalNum = res.pageInfo.totalPageNum;
            // }
        },
        // 获取资源提供方
        getProvider() {
            getProviderList().then((res) => {
                if (res) {
                    console.log(res, "获取资源提供方123");
                    this.providerList = res.data;
                }
            });
        },
        // 确认申请
        submitBtn(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    let codeArray = this.ItemProps.map((item) => item.code);
                    // 创建FormData实例
                    const formData = new FormData();
                    // 遍历fileList，将文件添加到formData中
                    this.fileList.forEach((file) => {
                        formData.append("file", file.raw);
                    });
                    formData.append("codes", codeArray.join(","));
                    formData.append("description", this.ruleForm.textarea);
                    console.log(this.fileList, "this.fileList");
                    getApplys(formData).then((res) => {
                        console.log(res, "申请提交");
                        if (res.code == "000000") {
                            this.$message({
                                message:
                                    "您的申请已提交成功，待审核，查看进度进入个人中心-我的申请",
                                type: "success",
                            });
                            this.approvalDialog.show = false;
                            this.ruleForm.textarea = "";
                            this.getListData();
                        }
                    });
                }
            });
        },
        infoHandle(val) {
            console.log(val, "val123123");
            this.infoFlag = true;
            this.$bus.$emit("busInfo", val);
            // document.documentElement.scrollTop = 250;
        },
        handanxuan(event, item) {
            console.log(event, "event");
            console.log(item, "item");
            this.eventDisabled = event;
            const index = this.infoList.findIndex((item) => item.id == item.id);
            if (event) {
                this.ItemProps.push(item);
            } else {
                this.ItemProps.splice(index, 1);
            }
            console.log(this.ItemProps, "ItemProps");
            const codeArray = this.ItemProps.map((item) => item.code);
            this.codeString = codeArray.join(",");
            console.log(this.codeString, "this.codeString");
            this.infoList.forEach((par) => {
                if (par.id == item.id) {
                    par.isAct = event;
                }
            });
        },

        // 获取列表数据
        getListData(id) {
            this.infoFlag = false;
            let param = {
                pageNo: this.pageNo,
                size: this.pageSize,
                id: this.code ? this.code : 2,
                deptType: 1,
                jcid: this.jcid,
                bqid: this.bqid,
                cjid: this.cjid,
                name: this.searchInfo
            };
            getSjmlTreeList(param).then((res) => {
                this.infoList = res.content.map((item) => {
                    return { ...item, isAct: false }; // 返回一个新对象，包括原有属性和新的 isAct 属性
                });
                this.totalNum = res.totalElements;
            });
        },
        // 点击树形结构
        chooseDeptList(data, node) {
            this.code = data.id;
            this.pageNo = 1
            this.getListData();
        },
        // 选择资源提供方
        choosePro(val) {
            console.log(val, "val");
            this.institutionCodes = val ? val.code : "";
            this.pageNo = 1;
            this.getListData();
        },
        // 改变数据显示条数
        handleSizeChange(val) {
            this.pageSize = val;
            this.getListData();
        },
        handleCurrentChange(val) {
            this.pageNo = val;
            this.getListData();
        },
        async getHotWord() {
            // 热门关键词
            const { data: res } = await topFive();
            if (res) {
                this.hotWordList = res;
            }
        },
        hotClick(val) {
            this.searchInfo = val;
            this.searchHandle();
        },
        searchHandle() {
            let param = {
                pageNo: 1,
                pageSize: 10,
                name: this.searchInfo,
            };
            getServeSeek(param).then((res) => {
                if (res.data && res.data.tree) {
                    let arr = [];
                    arr.push(res.data.tree);
                    this.deptArr = arr;
                    this.$nextTick(() => {
                        this.$refs.tree.setCurrentKey(this.deptArr[0].id);
                    });
                }
                if (res.data && res.data.pageInfo) {
                    this.infoList = res.data.pageInfo.totalList;
                    console.log(this.infoList, "infoList");
                    this.currentPage = res.data.pageInfo.currentPage;
                    this.pageSize = res.data.pageInfo.pageSize;
                    this.totalNum = res.data.pageInfo.totalPageNum;
                }
            });
        },
        // 切换数据显示样式
        toggleList(val) {
            this.listFlag = val;
            if (val === "info") {
                if (this.infoImg === infoImg) {
                    this.infoImg = infoImgAct;
                    this.listImg = listImg;
                }
            } else {
                if (this.listImg === listImg) {
                    this.listImg = listImgAct;
                    this.infoImg = infoImg;
                }
            }
        },
        // 格式化数据
        initInfo(val, type) {
            if (type === "updateCycle") {
                let isHas = this.updateCycleList.find((item) => {
                    return item.code == val;
                });
                if (isHas) {
                    return isHas.name;
                }
            } else if (type === "shareType") {
                let isHas = this.shareTypeList.find((item) => {
                    return item.code == val;
                });
                if (isHas) {
                    return isHas.name;
                }
            } else if (type === "resourceType") {
                let isHas = this.resTypeList.find((item) => {
                    return item.code == val;
                });
                if (isHas) {
                    this.resTpye = isHas.name;
                    return isHas.name;
                }
            } else if (type === "ShareMode") {
                let arr = val.split(",");
                let arrTemp = [];
                for (let i = 0; i < arr.length; i++) {
                    let isHas = this.ShareModeList.find((item) => {
                        return item.code == arr[i];
                    });
                    if (isHas) {
                        arrTemp.push({
                            code: isHas.code,
                            name: isHas.name,
                            src:
                                isHas.code == 0
                                    ? sqlImg
                                    : isHas.code == 1
                                        ? fileImg
                                        : isHas.code == 2
                                            ? apiImg
                                            : "",
                        });
                    }
                }
                return arrTemp;
            }
        },
        formatterRow(row) {
            return this.initInfo(row.shareType, "shareType");
        },
        filterNode(value, data) {
            if (!value) return true;
            return data.name.indexOf(value) !== -1;
        },
        chooseAll() {
            this.checkAllFlag = !this.checkAllFlag;
            this.infoList.forEach((item) => {
                if (!this.checkboxDisabled(item)) {
                    // 检查是否禁用
                    item.isAct = this.checkAllFlag;
                }
            });

            // 点击申请时，只获取被选中的项
            this.ItemProps = this.infoList
                .filter((item) => item.isAct && !this.checkboxDisabled(item))
                .map((item) => {
                    console.log(item, "item");
                    return {
                        name: item.name,
                        catalogName: item.catalogName,
                        institutionName: item.institutionName,
                        createTime: item.createTime,
                        code: item.code,
                    };
                });
        },
        approvalBtnClick() {
            const indexp = this.ItemProps.reduce((item, current) => {
                if (!item.includes(current)) {
                    console.log("数据重复了");
                    item.push(current);
                }
                return item;
            }, []);
            console.log(indexp, "indexp1");
            this.ItemProps = indexp;
            console.log(this.ItemProps, "this.ItemProps1");
            this.approvalDialog = {
                show: true,
            };
        },
        approvalBtn(parmas) {
            this.bmId = parmas.id;
            console.log(this.ItemProps, "shuju");
          // 调用子组件的重置方法
          setTimeout(() =>{
            if( this.$refs.initxxx){
              this.$refs.initxxx.getbmFn();
              this.$refs.initxxx.getsprFn();
            }
          },100)
            // if (this.ItemProps.length > 1) {
            //     console.log("数据大于1了说明是选择了多条");
            //     // alert("多选走上面按钮");
            //     return;
            // } else {
            //     const items = this.infoList.find((item) => item.id == parmas.id);
            //     this.ItemProps = [items];
            // }
            this.approvalDialog = {
                show: true,
            };
            // this.infoList.forEach((item) => (item.isAct = false));
        },
        clearText(event) {
            event.stopPropagation();
            this.searchInfo = "";
        },
        // 下载模版
        downloadTemplateBtn() {
            getCheckFile({ type: 0 }).then((res) => {
                console.log(res, "下载模版");
                if (res.code == "000000") {
                    this.$message({
                        message: "无可用模板，请联系提供方",
                        type: "warning",
                    });
                }
            });
        },
    },
};
</script>

<style scoped>
.filter-container{
  position: relative;
}
.toggleBtn {
  position: absolute;
  bottom: 12px;
  right: -15px;
  cursor: pointer;
}
.clearfix:after {
  content:'';
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
  font-size: 0;
}
.clearfix{
  display: block;
}
.transUl {
  overflow: hidden;
  /*transition: height 3s;*/
}
.imageBox {
    margin-top: 23px;
}

.not-must-write {
    margin-left: 10px;
}

.must-write {
    position: relative;
    margin-left: 16px;
}

.must-write::before {
    position: absolute;
    content: "*";
    left: -10px;
    color: red;
}

.dialog-bottom {
    display: flex;
    justify-content: center;
    /* margin-right: 100px; */
}

.form-title {
    margin: 12px 0;
    border-left: 4px solid #198ef8;
    height: 22px;
    line-height: 22px;
    font-size: 14px;
    box-sizing: border-box;
}

.el-main {
    padding: 0;
}

.t4_qb {
    width: 70px;
    padding: 5px;
    background: #198ef8;
    float: left;
    text-align: center;
    cursor: pointer;
}

.t4_qb a {
    color: #fff;
}

.t4_r.t4_r_sj.t4_border.phone_css {
    height: 950px;
}

.t4_search ul li:hover {
    background: rgba(255, 255, 255, 0.1);
}

.lTop-box {
    padding: 0 0 15px;
    background-color: #f7f8fa;
}

.lTop-box .proList {
    padding: 15px 30px;
    background-color: #fff;
    border-bottom: 4px solid #198ef8;
    display: flex;
    flex-direction: row;
}

.lTop-box .proList .tit {
    width: 85px;
    padding: 5px 0;
}

.lTop-box .proList ul {
    flex: 1;
    padding: 0;
    margin: 0;
}

.lTop-box .proList ul li {
    float: left;
    text-align: center;
    padding: 5px 10px;
    height: 30px;
    width: 18.5%;
    margin: 0 5px;
    background-color: #f8f8f8;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-left: 24px;
    padding-right: 24px;
}

.lTop-box .proList ul li.proAct {
    background-color: #f1f8ff;
    color: #204dac;
}

.listToggle {
    padding: 13px 20px;
}

.listToggle span {
    display: inline-block;
    margin-right: 10px;
    cursor: pointer;
}

.listToggle.backBtn {
    border-bottom: 4px solid #198ef8;
}

#pageDiv {
    text-align: center;
    padding: 20px;
}

#pageDiv /deep/ .el-select__caret {
    width: auto;
    height: auto;
}

#pageDiv /deep/ .el-pagination__jump {
    color: #606266;
    margin: 0;
}

.gxfs img {
    width: 20px;
}

.zyInfoBox {
    display: flex;
    flex-direction: row;
}

.zyInfoBox .zyInfo {
    flex: 1;
    margin-left: 8px;
    font-size: 13px;
}

.zyInfoBox .zyInfo .infoItem_box {
    display: flex;
    flex-direction: row;
}

.zyInfoBox .zyInfo .infoItem_box .infoItem {
    flex: 1;
}

.zyInfoBox .zyInfo .infoItem_box .infoItem>div {
    margin-top: 8px;
}

.zyInfoBox .zyInfo .infoItem_box .infoItem .imgBox,
.el-table .imgBox {
    display: inline-block;
    margin-right: 5px;
}

.zyInfoBox .zyInfo .infoItem_box .infoItem .imgBox img.sqlImg,
.el-table .imgBox img.sqlImg {
    width: 18px;
}

.zyInfoBox .zyInfo .infoItem_box .infoItem .imgBox img,
.el-table .imgBox img {
    width: 22px;
}

.remark {
    font-size: 12px;
    margin-bottom: 10px;
    color: #c4c4c4;
}

h2.titBox {
    position: relative;
}

h2.titBox .sqBtn {
    position: absolute;
    right: 0;
    top: 0;
}

h2.titBox a {
    cursor: pointer;
}

.t4_banner {
    position: relative;
}

.t4_banner .t4_bannerBOX {
    width: 90%;
    margin: 0 auto;
}

.t4_banner .t4_bannerBOX .list_Ul {
    cursor: pointer;
    display: flex;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 40px;
    height: 10px;
}

.t4_banner .t4_bannerBOX .list_Ul li {
    margin-left: 10px;
    color: #5f5f5f;
}

.t4_banner .t4_bannerBOX .list_Ul a:hover {
    background: rgba(255, 255, 255, 0.1);
}

/deep/ .t4_banner .el-input-group--append .el-input__inner {
    height: 50px;
    line-height: 50px;
    background: #fff;
    border: 1px solid #fff;
    color: #636363;
    text-indent: 15px;
}

/deep/ .t4_banner .el-input-group__append {
    background-color: #198ef8;
    color: #fff;
    border: none;
}

.highlighted {
    background: #198ef8 !important;
    color: #fff !important;
}
</style>
